<template>
    <div class="fillContain">
        <head-top></head-top>

        <el-form :inline="true" ref="form" size="mini" label-width="">
            <el-form-item label="报表名称：">
                <el-input
                        placeholder="请输入报表名称"
                        v-model="name"
                        style="width: 200px"
                        clearable>
                </el-input>
            </el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="addRow()">新增</el-button>
        </el-form>

        <el-table
                ref="singleTable"
                :data="tableData"
                border
                style="width: 100%"
                height="600px"
                max-height="100%"
                @current-change="handleCurrentRowChange">
            <el-table-column
                    prop="id"
                    label="报表ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="服务器名称">
            </el-table-column>
            <el-table-column
                    prop="host"
                    label="主机地址">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名">
            </el-table-column>
            <el-table-column
                    prop="uploadPath"
                    label="上传路径">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="editRow(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-circle-close" @click="removeRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts">
        </el-pagination>
        <!--编辑/新增弹窗-->
        <el-dialog :title="minititle" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="miniform" ref="miniform" :rules="rules" label-position="right" label-width="100px">
                <el-form-item label="名称:" prop="editname">
                    <el-input v-model="miniform.editname" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="IP:" prop="edithost">
                    <el-input v-model="miniform.edithost" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="端口:" prop="editport">
                    <el-input v-model="miniform.editport" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="用户名:" prop="editusername">
                    <el-input v-model="miniform.editusername" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="editpassword">
                    <el-input v-model="miniform.editpassword" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="上传路径:" prop="editpath">
                    <el-input v-model="miniform.editpath" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editMiniCancel()">取 消</el-button>
                <el-button type="primary" @click="editMiniOk()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {getTableData, removeRowData,updateRowData,insertRowData} from '@/api/reportUpload'
    import HeadTop from '@/views/main-components/HeadTop.vue'

    export default {
        created: function () {
            this.getUserInfo();
        },
        data() {
            return {
                tableData: [],
                currentRow: null,
                name: '',
                counts: 0,
                currentPage: 1,
                pageSize: 10,
                minititle:'',
                dialogFormVisible: false,
                miniform:{
                    editid:'',
                    editname:'',
                    edithost:'',
                    editport:'',
                    editusername:'',
                    editpassword:'',
                    editpath:''
                },
                rules: {
                    editname: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        {  max: 30, message: '长度在 30 个字符以内', trigger: 'blur' }
                    ],
                    edithost: [
                        { required: true, message: '请输入IP', trigger: 'blur' },
                    ],
                    editport:[
                        { required: true, message: '请输入端口', trigger: 'blur' },
                        {  max: 10, message: '长度在 10 个字符以内', trigger: 'blur' }
                    ],
                    editusername:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        {  max: 30, message: '长度在 30 个字符以内', trigger: 'blur' },
                        {  min: 2, message: '长度在 2 个字符以上', trigger: 'blur' }
                    ],
                    editpassword:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        {  max: 30, message: '长度在 30 个字符以内', trigger: 'blur' },
                        {  min: 4, message: '长度在 4 个字符以上', trigger: 'blur' }
                    ],
                    editpath: [
                        { required: true, message: '请输入上传路径', trigger: 'blur' },
                    ]
                }
            }
        },
        components: {
            HeadTop,
        },
        methods: {
            //监听页面变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.search();
            },
            //监听选中行数
            handleCurrentRowChange(val) {
                this.currentRow = val;
                //alert(this.currentRow.address);
            },
            //监听页面选择变化
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },
            /**
             *测试用户权限
             */
            async getUserInfo(){
                console.log(this.$route.query.userId);
                let STAFF_ID=this.$utils.getUrlKey("STAFF_ID");
                let OPERATE_TIME=this.$utils.getUrlKey("OPERATE_TIME");
                let TRADE_ID=this.$utils.getUrlKey("TRADE_ID");
                let SIGNMSG=this.$utils.getUrlKey("SIGNMSG");
                let channel='reportUpload';

                if (STAFF_ID=="1"||this.pression==false){
                    this.search();
                }else {
                    let userinfo= await this.getUser(STAFF_ID,OPERATE_TIME,TRADE_ID,SIGNMSG,channel);
                    if (userinfo.isPression){
                        this.search();
                    }else{
                        this.$router.push({path: '/404',query:{ msg:userinfo.msg}});
                    }
                }

            },
            //弹窗取消
            editMiniCancel() {
                this.$refs['miniform'].resetFields();
                this.dialogFormVisible = false;
            },
            //弹窗确定
            async editMiniOk() {
                this.$refs['miniform'].validate(async (valid) => {
                    if (valid) {
                        let params = {
                            id : this.miniform.editid,
                            name: this.miniform.editname,
                            host: this.miniform.edithost,
                            port: this.miniform.editport,
                            username: this.miniform.editusername,
                            password: this.miniform.editpassword,
                            uploadPath: this.miniform.editpath
                        }
                        let reply = this.minititle == "编辑" ? await updateRowData(params): await insertRowData(params);
                        if (reply.code == 500) {
                            this.$notify.error({
                                title: '错误',
                                message: '数据库操作失败，请联系相关人员！'
                            });
                        } else {
                            this.$notify.success({
                                message: '操作成功'
                            });
                        }
                        this.search();
                        this.$refs['miniform'].resetFields();
                        this.dialogFormVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            //编辑
            editRow(row) {
                this.minititle = "编辑";
                this.dialogFormVisible = true;
                this.miniform.editid = row.id;
                this.miniform.editname = row.name;
                this.miniform.edithost = row.host;
                this.miniform.editport = row.port;
                this.miniform.editusername = row.username;
                this.miniform.editpassword = "";
                this.miniform.editpath = row.uploadPath;
            },
            //查询
            async search() {
                const loading = this.$loading({
                    lock: true,
                    text: '加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = {
                    size: this.pageSize,
                    current: this.currentPage,
                    name: this.name
                };
                let reply = await getTableData(params);
                if (reply.code == 200) {
                    this.counts = reply.data.total;
                    this.currentPage = reply.data.pageNum;
                    this.tableData = reply.data.list;
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: '服务器异常或无响应，请联系相关人员！'
                    });
                }
                ;
                loading.close();
            },
            //删除
            async removeRow(row) {
                this.$msgbox({
                    title: '提示',
                    message: "此操作将删除该条数据, 是否继续?",
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            const loading = this.$loading({
                                lock: true,
                                text: '加载中...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            let reply = await removeRowData(row);

                            if (reply.code == 500) {
                                this.$notify.error({
                                    title: '错误',
                                    message: reply.msg
                                });
                            } else {
                                this.$notify.success({
                                    message: '删除成功'
                                });
                            }
                            this.search();
                            loading.close();
                        }
                        done();
                    }
                }).then(action => {
                });
            },
            addRow() {
                this.minititle = "新增";
                this.miniform.editname = '';
                this.miniform.edithost = '';
                this.miniform.editport = '';
                this.miniform.editusername = '';
                this.miniform.editpassword = '';
                this.miniform.editpath = '';
                this.dialogFormVisible = true;
            },
        }
    }
</script>

<style scoped>

</style>